//
//  HomeAttentionView.swift
//  HomeAttentionView
//
//  Created by Ben on 2021/8/30.
//

import SwiftUI
import SDWebImageSwiftUI

struct HomeAttentionView: View {
    
    @EnvironmentObject var homeVM: HomeViewModel
    var body: some View {
        
        
        // 采用List完成该页面布局
        
        ZStack {
            if homeVM.attentionUserList.isEmpty {
                
                // 未关注任何用户时候的关注页面
                HomeAttentionHasNoneAttentionUserList()

            } else {
                
                // 关注用户后的关注页面UI布局完成，由于数据从本地随机抽取进行模拟，调试过程略显繁琐，还请见谅，接下来UP主会用几天时间做一个简单的服务器支持，然后接入网络请求模块，来尽可能还原在真实网络环境中，请求并更新数据到UI的过程，敬请期待。
                List(0..<(homeVM.attentionUserMoments.count + 1)) { index in
                    if index == 0 {
                        
                        // 常访问的人
                        VStack(alignment: .leading, spacing: 30) {
                            Text("常访问的人")
                                .font(.system(size: 12))
                                .foregroundColor(Color(hex: 0xA4A4A4))

                            LazyVGrid(columns: Array(repeating: GridItem(.flexible()), count: 5), spacing: 5) {
                                
                                ForEach(homeVM.attentionUserList, id: \.self) { userModel in
                                    VStack {
                                        WebImage(url: URL(string: userModel.avatar ?? ""))
                                            .resizable()
                                            .aspectRatio(contentMode: .fit)
                                            .frame(width: 50, height: 50)
                                            .clipShape(Circle())
                                        
                                        Text(userModel.nick_name ?? "")
                                            .font(.system(size: 14))
                                            .foregroundColor(Color(hex: 0xA4A4A4))
                                            // 限制文字行数为1行
                                            .lineLimit(1)
                                    }
                                }
                            }
                            
                        }
                        .padding(.top, 10)
                        .padding(.bottom, 30)
                        .padding(.horizontal, 16)
                        .listRowSeparator(.hidden)
                        .listRowInsets(.zero)
                        
                    } else {
                        
                        // 接下来是关注的用户的最新动态
                        
                        let moment = homeVM.attentionUserMoments[index - 1]
                        let userModel = moment.seller
                        let goodsInfoModel = moment.goodsInfo
                        
                        VStack {
                            
                            VStack(spacing: 10) {
                                HStack {
                                    WebImage(url: URL(string: userModel?.avatar ?? ""))
                                        .resizable()
                                        .aspectRatio(contentMode: .fit)
                                        .frame(width: 45, height: 45)
                                        .clipShape(Circle())
                                    
                                    VStack {
                                        
                                        HStack {
                                            
                                            VStack(alignment: .leading) {
                                                Text(userModel?.nick_name ?? "")
                                                    .font(.system(size: 14, weight: .semibold))
                                                
                                                Text("2天前发布")
                                                    .font(.system(size: 10))
                                                    .foregroundColor(Color(hex: 0xC3C3C3))
                                            }
                                            
                                            Spacer()
                                            
                                            (
                                                Text("¥")
                                                    .font(.system(size: 12))
                                                +
                                                Text(goodsInfoModel?.priceStr ?? "")
                                                    .font(.system(size: 18))
                                            )
                                                .foregroundColor(Color(hex: 0xFC2F2C))
                                        }
                                        .padding(.bottom, 5)
                                        
                                        
                                    }
                                }
                                
                                Text(goodsInfoModel?.content ?? "")
                                    .font(.system(size: 12))
                                
//                                // 商品图片展示
//                                let images = [goodsInfoModel?.url ?? ""]
//                                let imageCount = images?.count ?? 0
//                                
//                                // 单张图片展示
//                                if imageCount == 1 {
//                                    
//                                    
//                                    ZStack {
//                                        Color.white
//                                        
//                                        GeometryReader { proxy in
//                                            
//                                            let width = proxy.size.width
//                                            WebImage(url: URL(string: images?.first ?? ""))
//                                                .resizable()
//                                                // 使用填充模式
//                                                .aspectRatio(contentMode: .fill)
//                                                .frame(width: width, height: 300)
//                                                .padding(1)
//                                        }
//                                        .frame(height: 300)
//                                        
//                                        
//                                    }
//                                    .clipShape(RoundedRectangle(cornerRadius: 10))
//                                    // 两张图片展示
//                                }
//                                else if imageCount == 2 {
//                                    ZStack {
//                                        Color.white
//                                        
//                                        GeometryReader { proxy in
//                                            
//                                            let width = proxy.size.width
//                                            
//                                            HStack(spacing: 1) {
//                                                WebImage(url: URL(string: images?.first ?? ""))
//                                                    .resizable()
//                                                    // 使用填充模式
//                                                    .aspectRatio(contentMode: .fill)
//                                                    .frame(height: 300)
//                                                    .frame(width: width * 0.5)
//                                                    .padding(.leading, 1)
//                                                    .padding(.vertical, 1)
//                                                    .clipped()
//                                                
//                                                WebImage(url: URL(string: images?.last ?? ""))
//                                                    .resizable()
//                                                    // 使用填充模式
//                                                    .aspectRatio(contentMode: .fill)
//                                                    .frame(height: 300)
//                                                    .frame(width: width * 0.5)
//                                                    .padding(.trailing, 1)
//                                                    .padding(.vertical, 1)
//                                                    .clipped()
//
//                                            }
//                                        }
//                                        .frame(height: 300)
//                                    }
//                                    .clipShape(RoundedRectangle(cornerRadius: 10))
//                                // 三张及以上图片展示
//                                }
//                                else {
//                                    ZStack(alignment: .bottomTrailing) {
//                                        Color.white
//                                        
//                                        GeometryReader { proxy in
//                                            let width = proxy.frame(in: .global).size.width
//                                            
//                                            HStack(spacing: 1) {
//                                                WebImage(url: URL(string: images?[0] ?? ""))
//                                                    .resizable()
//                                                    // 使用填充模式
//                                                    .aspectRatio(contentMode: .fill)
//                                                    .frame(height: 300)
//                                                    .frame(width: width * 0.65)
//                                                    .padding(.leading, 1)
//                                                    .padding(.vertical, 1)
//                                                    .clipped()
//
//                                                
//                                                VStack(spacing: 1) {
//                                                    WebImage(url: URL(string: images?[1] ?? ""))
//                                                        .resizable()
//                                                        // 使用填充模式
//                                                        .aspectRatio(contentMode: .fill)
//                                                        .frame(height: 150)
//                                                        .padding(.trailing, 1)
//                                                        .clipped()
//
//                                                    
//                                                    WebImage(url: URL(string: images?[2] ?? ""))
//                                                        .resizable()
//                                                        // 使用填充模式
//                                                        .aspectRatio(contentMode: .fill)
//                                                        .frame(height: 150)
//                                                        .padding(.trailing, 1)
//                                                        .clipped()
//
//                                                    
//                                                }
//                                            }
//                                        }
//                                        .frame(height: 300)
//                                        
//                                        Text("\(Int.random(in: 3..<20))+")
//                                            .font(.system(size: 10))
//                                            .foregroundColor(.white)
//                                            .padding(.vertical, 2)
//                                            .padding(.horizontal, 4)
//                                            .background(
//                                                RoundedRectangle(cornerRadius: 4)
//                                                    .fill(Color(hex: 0x171E1B))
//                                            )
//                                            .offset(x: -20, y: -20)
//                                    }
//                                    
//                                    .clipShape(RoundedRectangle(cornerRadius: 10))
//                                    
//                                }
                            }
                            .padding(.horizontal, 16)
                            
                            // 底部分割线
                            Color(hex: 0xEDEDED)
                                .frame(width: SCREEN_WIDTH, height: 1)
                                .padding(.top, 10)
                        }
                        .padding(.top, 20)
                        .padding(.bottom, 20)
                        .listRowSeparator(.hidden)
                        .listRowInsets(.zero)

                    }
                }
                .listStyle(.plain)
            }
        }
    }
}

struct HomeAttentionView_Previews: PreviewProvider {
    static var previews: some View {
        HomeAttentionView()
    }
}
